<template>
    <div class="copyright">
        <h5>
            <span>版权信息</span>
        </h5>
        <ul class="copyright-tab">
            <li @click="tabClick(1)" :class="{active : tabNum==1?true:false}">
                <span class="tab-title">ios</span>
            </li>
            <li @click="tabClick(2)" :class="{active:tabNum==2?true:false}">
                <span class="tab-title">android</span>
            </li>
        </ul>
        <div class="ql-editor">
            <div class="ql-editor-top">
                <span class="title">{{tabNum==1?'ios':'android'}} 版权信息</span>
                <span class="add my-background" @click="addClick">{{editnum?'编辑':'保存'}}</span>
            </div>
            <div v-if="editnum">
                <div class="text" v-html="str?str: '暂无版权信息！'"></div>
            </div>
            <div class="edit_container" v-else>
                <quill-editor 
                    v-model="content" 
                    ref="myQuillEditor" 
                    :options="editorOption" 
                    @change="onEditorChange($event)">
                </quill-editor>
            </div>
        </div>
    </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
    components: {
        quillEditor
    },
    data(){
        return{
            id:'',
            tabNum:1,
            editnum:true,//编辑框的显示隐藏
            content:'' ,
            str:'',
            editorOption: {}
        }
    },
    mounted(){
        this.getcopyright(1)
    },
    methods:{
        //获取版本信息
        getcopyright(n){
            this.axios.get('/operate/sys/Copyright/list?type='+ n).then(res=>{
                this.id=res.data.List.id
                this.content=res.data.List.content
                this.str = this.escapeStringHTML(this.content);
                console.log(this.content)
            })
        },
        //切换tab
        tabClick(n){
            this.tabNum=n
            this.getcopyright(n)
            this.editnum=true
        },
        //保存
        addClick(){
            if(!this.editnum){
                var agreementEntity={
                    content:'',
                    creationTime:'',
                    id:'',
                    type:''
                }
                agreementEntity.content=this.content
                agreementEntity.id=this.id
                agreementEntity.type=this.tabNum
                console.log('agfhkjahsk',agreementEntity.content)
                this.axios({
                    url:'/operate/sys/Copyright/update',
                    method:'post',
                    data:JSON.stringify(agreementEntity),
                     headers: {'Content-Type': 'application/json;charset=UTF-8'}
                }).then(res=>{
                    setTimeout(()=>{
                        this.getcopyright(this.tabNum)
                    },100)
                })
            }
            this.editnum=!this.editnum
        },
        //内容改变事件
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.content = html
        },
        // 转码
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        },

    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>

<style scoped>
.edit_container{
    margin-top: 50px;
}
.button{
    display: inline-block;
    margin-top: 30px;
    padding:0 30px;
    /* float: right; */
}
.ql-editor{
    margin-top: 50px;
}
.ql-editor-top{
    display: flex;
    justify-content: space-between;
}
.ql-editor .title{
    display: inline-block;
    width: 150px;
    font-size: 17px;
}
.ql-editor .add{
    display: inline-block;
    font-size: 15px;
    width: 62px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    color: #fff;
    margin-left: 40px;
}
.ql-editor .text{
    margin-top: 60px;
    padding: 20px;
    border: 1px solid #eee;
    min-height: 300px;
}

/* tab切换 */
.copyright-tab{
    display: flex;
    margin-bottom: 6px;
    justify-content: center;
    margin: 10px;
}
.copyright-tab li{
    padding: 5px 30px;
    margin: 10px;
    color: #999;
    background: #fff;
    font-size: 18px;
    border: 1px solid #eee;
    border-radius: 2px;
}
.active{
    color: rgb(51, 51, 51)!important;
    background: #f7f7f8!important;
}
</style>
<style>
.ql-toolbar.ql-snow + .ql-container.ql-snow{
    min-height: 230px;
}
</style>